<template>
<div class="musicList">
    <div class="musicList-t">
        <div class="title">find good musicList</div>
        <div class="more">check more >></div>
        
    </div>
    <div class="musicList-b">
        <van-swipe :loop="false" :width="200" class="van-swipe"  v-for="(item,i) in state.musicList" :key="i">
            <router-link :to="{path:'/ListView',query:{id:item.id}}">
                <van-swipe-item class="van-swipe-item">
                    <img :src="item.picUrl" alt="item.name"/>
                    <span class="name">{{item.name}}</span>
                </van-swipe-item>   
            </router-link>
          </van-swipe>
    </div>
</div>

<van-swipe class="my-swipee" :autoplay="30000" :width="300"   indicator-color="white"  v-for="(item,i) in state.musicList" :key="i">
    <router-link :to="{path:'/ListView'}" >
      <van-swipe-item class="van-swipe-itemm" >
            <img :src="item.picUrl" alt="item.name"/>
            <span class="namee">{{item.name}}</span>
        </van-swipe-item> 
    </router-link>
</van-swipe>
</template>

<script>
import {getMusicList} from '../api/index'
import {onMounted,reactive} from 'vue'
import { useStore } from 'vuex';
// import {store} from '../store/index'
// import {router} from '../router/index'

export default {
    setup(){
      let state=reactive({
            musicList:[]
        });

        function changeValue(num){
            let res=0
            if(num>100000000){
                res=num/100000000
                res=res.toFixed(2)+'亿'//toFixed() 方法使用定点表示法来格式化一个数值 numObj.toFixed(digits) 小数点后数字的个数；介于 0 到 20 （包括）之间，实现环境可能支持更大范围。如果忽略该参数，则默认为 0。可以理解为digits是几就返回几位小数
            }else if(num>10000){
                res=num/10000
                res=res.toFixed(2)+'万'
            }
            return res
        }
        let store = useStore();
        console.log(store)
        onMounted(async()=>{
            let musicList = await getMusicList(6).then((res)=>{
                state.musicList=res.data.result;
                console.log(store)
                store.commit('setPlaylist',state.musicList)
                console.log(state.musicList)
            })
        })

        return {
            state,
        }
    }
}
</script>

<style lang="less" scoped>
.musicList{
    width: 7.5rem;
    .musicList-t{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 0.22rem 0.22rem 0.22rem;
        .title{
            font-size:0.26rem;
            font-weight: 900;
        }
        .more{
            border: 1px solid #ccc;
            padding: 0.1rem;
            border-radius: 0.2rem;
        }
    }
    .musicList-b{
    height: 3.5rem;
    width: 7.5rem;
    display: flex;
    .van-swipe { 
        display: flex;
        height: 4.5rem;
        color: #fff;
        font-size: 0.2rem;
        line-height: 150px;
        text-align: center;
        border-radius: 0.2rem;
        .van-swipe-item{
        width: 0.3rem;
        display: flex;
        padding: 0 2rem 1rem 0;
        flex-direction: column;
        img{
            display: flex;
            justify-content: space-around;
            padding: 0 0.75rem 0.2rem 0;
            width: 3.5rem;
            border-radius: 0.1rem;
           }
        .name {
            display:flex;
            height: 1rem;
            width: 100%;
            line-height: 0.4rem;
            word-wrap: break-word;
        }
        }
       } 
    }
}
// .imggg{
//     width: 7.5rem;
//     height: 4rem;
//     text-align: center;
//     .imgg{
//         display: flex;
//         flex-direction: column;
//     }
// }
// .my-swipe .van-swipe-item {
//     width: 7.1rem;
//     height: 2.6rem;
//     border-radius: 0.2rem;
//     color: rgb(12, 12, 12);
//     font-size: 0.26rem;
//     line-height: 150px;
//     text-align: center;
//     img{
//       width: 3rem;
//       height: auto;
//     }
//   }
.van-swipee { 
        display: flex;
        width: 7.5rem;
        height: 4.5rem;
        color: #fff;
        font-size: 0.2rem;
        line-height: 150px;
        text-align: center;
        border-radius: 0.2rem;
        .van-swipe-itemm{
        width: 0.3rem;
        display: flex;
        flex: 1;
        padding: 0 2rem 1rem 0;
        flex-direction: column;
        img{
            display: flex;
            justify-content: space-around;
            padding: 0 0.75rem 0.2rem 0;
            width: 1rem;
            height: 1rem;
            border-radius: 0.1rem;
           }
        .namee {
            display:flex;
            height: 1rem;
            width: 100%;
            line-height: 0.4rem;
            word-wrap: break-word;
        }
    }
} 

</style>